import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import classNames from 'classnames'
import './index.scss'

class Menu extends Taro.Component {
    static defaultProps = {
        list: []
    }

    handleClick(categoryId,pic) {
        this.props.onClick(categoryId,pic)
    }

    category(item, categoryId) {
        const active = item.categoryId === categoryId
        return (
            <View className={classNames('menu-item', active && 'menu-item active')} onClick={this.handleClick.bind(this, item.categoryId,item.pic)}>
                {item.categoryName}
            </View>
        )
    }

    categoryList(list, categoryId) {

        const category = (list || []).map((item) => {
            return this.category(item, categoryId)
        })

        return (
            <View>
                {category}
            </View>
        )
    }
    render() {
        const { list, categoryId } = this.props
        return (
            <View>
                <ScrollView
                    scrollY
                    className='leftmenu'>
                    {
                        this.categoryList(list, categoryId)
                    }
                </ScrollView>
            </View>
        )
    }
}
export default Menu